<template>
  <div class="overview-card-container">
    <el-card
      class="overview-card"
      body-class="overview-card-body"
      shadow="hover"
    >
      <el-icon size="70">
        <gameIcon />
      </el-icon>
      <el-statistic title="游戏总数（已发布）" :value="outputValue" />
    </el-card>
    <el-card
      class="overview-card"
      body-class="overview-card-body"
      shadow="hover"
    >
      <el-icon size="70" color="#f56c6c">
        <ShoppingCart />
      </el-icon>
      <el-statistic title="订单数" :value="outputValue1" />
    </el-card>
    <el-card
      class="overview-card"
      body-class="overview-card-body"
      shadow="hover"
    >
      <el-icon size="70" color="#67c23a">
        <Checked />
      </el-icon>
      <el-statistic title="交易成功率" :value="outputValue3" suffix="%" />
    </el-card>
    <el-card
      class="overview-card"
      body-class="overview-card-body"
      shadow="hover"
    >
      <el-icon size="70" color="#409eff">
        <TrendCharts />
      </el-icon>
      <el-statistic title="收入统计" :value="outputValue2" suffix="￥" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { useTransition } from "@vueuse/core";
import gameIcon from "@/assets/svg/gameListIcon.svg";
// import AuditIcon from "@/assets/svg/auditIcon.svg";
const source1 = ref(0);
const source2 = ref(0);
const source3 = ref(0);
const source4 = ref(0);
const outputValue = useTransition(source1, {
  duration: 1500,
});

const outputValue1 = useTransition(source2, {
  duration: 1500,
});

const outputValue2 = useTransition(source3, {
  duration: 1500,
});

const outputValue3 = useTransition(source4, {
  duration: 1500,
});

onMounted(() => {
  source1.value = 172000;
  source2.value = 90000;
  source3.value = 1000000;
  source4.value = 89.9;
});
</script>

<style>
.overview-card-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em;
}
.overview-card {
  width: 24%;
}
.overview-card-body {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
</style>
